<template>
  <div>
    <span>权利要求对比:</span>
    <el-popover
      placement="bottom"
      width="328"
      trigger="click"
      popper-class="selPopver"
    >
      <div class="input" slot="reference">
        <span>显示选择专利</span>
        <i class="el-icon-arrow-down"></i>
      </div>
      <!-- 内容 -->
      <div class="selContent">
        <div class="selHeader">对比专利列表</div>
        <div class="selList">
          <div
            v-for="(item, index) in selected"
            :key="index"
            class="selectedItem"
          >
            <el-checkbox v-model="checked">{{ item.name }}</el-checkbox>
            <div>撒快递两节课极乐空间打了卡时间到了科技离开建档立卡极乐空间拉开距离科技快来了</div>
          </div>
        </div>
        <div class="selbutton">
          <el-button size="mini" type="text">重置</el-button>
          <div>
            <el-button size="mini" plain>取消</el-button>
            <el-button size="mini" plain>确定</el-button>
          </div>
        </div>
      </div>
    </el-popover>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: [
        { name: "张三" },
        { name: "萨达" },
        { name: "阿萨德" },
        { name: "撒董家口" },
      ],
    };
  },
  computed: {
    selectedStr() {},
  },
};
</script>

<style lang='less' scoped>
.input {
  display: inline-flex;
  width: 212px;
  height: 34px;
  border-radius: 2px;
  border: 1px solid red;
  padding: 9px 10px;
  padding-right: 25px;
  box-sizing: border-box;
  align-items: center;
  position: relative;
  i {
    position: absolute;
    right: 8px;
    top: 8px;
  }
  span {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 400;
    color: #86909c;
  }
}
</style>
<style lang='less'>
.selPopver {
  height: 270px;
  .selContent {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .selHeader {
    height: 20px;
    font-size: 14px;
    font-weight: 400;
    color: #1d2129;
    line-height: 20px;
    border-bottom: 1px solid #dce1e8;
  }
  .selList {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    .selectedItem {
      padding: 8px 0;
      border-top: 1px solid #dce1e8;
      &:nth-of-type(1){
        border: none;
      }
      .el-checkbox__label {
        padding-left: 13px;
        font-size: 14px;
        font-weight: 500;
        color: #1d2129;
        line-height: 20px;
      }
      div {
        width: 290px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        margin-left: 28px;
        font-size: 14px;
        font-weight: 400;
        color: #4e5969;
        line-height: 20px;
      }
    }
  }
  .selbutton {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #dce1e8;
    div {
      display: flex;
    }
  }
}
</style>